<template>
	<div class="zichan-container">
		<div class="box_title">镇属土地利用Top5</div>
		<div class="chart" id="chart_right3"></div>
	</div>
</template>

<script>
	import '@/assets/js/echarts-wordcloud.min'

	export default {
		name: "zichan",
		data() {
			return {
				timer: null
			}
		},
		mounted() {
			this.getEchartRight1();
			this.timer = setInterval(() => {
				this.getEchartRight1();
			}, 5000)
		},
		methods: {
			getEchartRight1() {
				let myChart = echarts.init(document.getElementById('chart_right3'));

				var charts = { // 按顺序排列从大到小
					cityList:["东莞道滘万宝至马达有限公司","广东道滘华科鼎城产业孵化有限公司","东莞市智造产业园投资管理有限公司","东莞永达彩印有限公司","东莞市立丸奈米科技有限公司"],
					cityData: [71023,50919,38454,35064,28747.68]
				}
				var top10CityList = charts.cityList
				var top10CityData = charts.cityData
				var color = ['rgba(22,197,250', 'rgba(47,169,225', 'rgba(100,149,237', 'rgba(135,206,250', 'rgba(175,238,238','rgba(173,216,230','rgba(72,209,204','rgba(230,230,250','rgba(	176,196,222']

				let lineY = []
				for (var i = 0; i < charts.cityList.length; i++) {

					var x = i
					if (x > color.length - 1) {
						x = color.length - 1
					}
					var data = {
						name: charts.cityList[i],
						color: color[i] + ')',
						value: charts.cityData[i],
						itemStyle: {
							normal: {

								show: true,
								color: new echarts.graphic.LinearGradient( //渐变色
										1, 1, 0, 0, [{
											offset: 1,
											color: color[x] + ', 0.3)'
										}, {
											offset: 0,
											color: color[x] + ', 1)'
										}

										]
								),
								barBorderRadius: 10
							},
							emphasis: {
								shadowBlur: 15,
								shadowColor: 'rgba(0, 0, 0, 0.1)'
							}
						}
					}
					lineY.push(data)
				}

				console.log(lineY)
				console.log(top10CityData)
				const option= {
					title: {
						show: false
					},
					tooltip: {
						trigger: 'item'
					},
					grid: {
						borderWidth: 0,
						top: '15%',
						left: '5%',
						right: '25%',
						bottom: '5%'
					},
					color: color,
					yAxis: [{
						type: 'category',
						inverse: true,
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},
						axisLabel: {
							show: false,
							inside: false
						},
						data: top10CityList
					}, {
						type: 'category',
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: true,
							inside: false,
							textStyle: {
								color: '#b3ccf8',
								fontSize: '14',
								fontFamily: 'PingFangSC-Regular'
							},
							formatter: function (val) {
								return `${val}亩`
							}
						},
						splitArea: {
							show: false
						},
						splitLine: {
							show: false
						},
						data: top10CityData.reverse()
					}],
					xAxis: {
						type: 'value',
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},
						splitLine: {
							show: false
						},
						axisLabel: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'bar',
						zlevel: 2,
						barWidth: '15px',
						data: lineY,
						animationDuration: 1500,
						label: {
							normal: {
								color: '#b3ccf8',
								show: true,
								position: [0, '-24px'],  //条形位置

								textStyle: {
									fontSize: 16
								},
								formatter: function (a, b) {
									return a.name
								}
							}
						}
					}],
					animationEasing: 'cubicOut'
				}

				myChart.setOption(option, true);
				window.addEventListener('resize', () => {
					myChart.resize();
				});
			},
		},
		beforeDestroy() {
			clearInterval(this.timer);
		}
	};
</script>

<style lang="scss" scoped>
	.zichan-container {
		.chart {
			height: 5.33rem;
		}
	}
</style>
